<template>
    <div class="search">
        <Myhead :title="title"></Myhead>
        <div class="mySearch">
            <div class="searchInput">
                <van-icon color="#999" size="0.5rem" name="search" />
                <input type="text" v-model="searchValue" placeholder="请输入搜索关键字" name="" id="" />
                <button @click="searchSend(searchValue)">搜索</button>
            </div>
        </div>
        <van-popup v-model:show="show" round :style="{ padding: '40px 62px' }">
            <van-cell-group>
                <van-cell v-if="searchList.list.length > 0" :value="item.title" @click="dd(item)" v-for="item in searchList.list" />
                <van-cell v-else value="暂无该新闻" />
            </van-cell-group>
        </van-popup>

        <div class="searchTab">
            <span @click="searchSend(item)" v-for="item in searchTab.list">{{ item }}</span>
        </div>
    </div>
</template>
<script setup>
import Myhead from "../../components/Myhead.vue";
import { newsSearch } from "@/request/index";
import { Search, Popup } from "vant";
import { ref, defineComponent, reactive, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { undateUserWeb } from "@/request/index";
import { useStore } from "vuex";
let store = useStore();
let user_id = localStorage.getItem("token");
const router = useRouter();
let searchValue = ref("");
let show = ref(false);
let searchList = reactive({ list: [] });
let searchTab = reactive({ list: [] });
defineComponent({
    Myhead,
});
let title = ref("搜索");
const searchSend = (x) => {
    show.value = true;

    newsSearch({ content: x }).then((data) => {
        searchList.list = data.rows;
        // console.log(searchList);
        store.commit("myRoute/addSearch", x);
        // searchTab.list.push(x);
        searchValue.value = "";
        x = "";
    });
};
onBeforeMount(() => {
    searchTab.list = store.state.myRoute.searchList;
    // console.log(store.state.myRoute.searchList);
});
const dd = (x) => {
    router.push({ path: "/newsDetail", query: { id: x.id } });
    undateUserWeb({ user_id, comment_db: "comment", comment_id: x.id, comment: x.digest }).then((data) => {
        // console.log("undateUserWeb", data);
    });
};
</script>
<style lang="scss">
.search {
    .van-cell__value {
        text-align: center;
    }
}
.searchTab {
    padding: 0.2667rem;
    display: flex;
    flex-wrap: wrap;
    span {
        border: 1px solid #ccc;
        padding: 0.0533rem 0.16rem;
        border-radius: 0.2133rem;
        margin-left: 0.2133rem;
        margin-bottom: 0.16rem;
        font-size: 0.3733rem;
        color: #666;
        font-weight: 100;
    }
}
.mySearch {
    width: 100%;
    height: 0.9067rem;
    padding: 0.2667rem 0;
    background-color: #ebebeb;
    .searchInput {
        height: 0.9067rem;
        width: 9.2rem;
        margin: 0 auto;
        background-color: white;
        border-radius: 0.48rem;
        > .van-icon {
            line-height: 0.9rem;
            margin-left: 0.2667rem;
        }
        input {
            outline: none;
            border: none;
            padding-left: 0.16rem;
            width: 6.8rem;
            &::placeholder {
                color: #ccc;
                font-weight: 100;
                font-size: 0.3733rem;
                transform: translateY(-0.0533rem);
            }
        }
        button {
            transform: translateY(-0.0533rem);
            color: #666;
            border: none;
            background-color: white;
            font-weight: 100;
            font-size: 0.3733rem;
        }
    }
}
</style>
